<!DOCTYPE>
<html>
<head>
	<meta content="text/html;charset=UTF-8" http-equiv="Content-Type" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
	<title>搜索</title>
	<link rel='stylesheet' type='text/css' href='css/common.css'>
	<link href="css/perCenter.css" rel="stylesheet" type="text/css" />
</head>

<body>	
	<!-- 导航条开始 -->
	<div class='navbar nav-fixed'>
			<ul>
				<li><a href="#">返回论坛</a></li>
				<li><a href="#">资源下载</a></li>
				<li><a href="#">天空</a></li>
				<li><a href="#">历史介绍</a></li>
				<li><a href="#">校园助手</a></li>
				<li><a href="#">娱乐</a></li>
				<li><a href="#">华农百科</a></li>
			</ul>
			<ul class='float-right'>
				<li class='active'>
					<a href="#">下载红满堂客户端</a>
					<div class='load'>
						<img class='load-top' src="img/nav-logo.png">
						<img src="img/nav-code.png">
						<a class='load-link' href="#"></a>
						<a class='load-link load-link-bottom' href="#"></a>
					</div>
				</li>
				<li><a href="#">提醒</a></li>
				<li><a href="sign.html">登录</a></li>
			</ul>
	</div>
<!-- 导航条结束 -->
<!-- 导航开始 -->
	<div class='nav-bg'>
		<div class='nav-box'>
			<div class='logo'></div>
			<ul class='nav'>
				<li><a href="index.html">首页</a></li><li><a href="search.html">所有商品</a></li><li><a href="release.html">发布商品</a></li><li><a href="help.html">用户帮助</a></li>
			</ul>
			<div class='search'>
				<input type='text'><button>搜索</button>
			</div>
		</div>
	</div>
	<div class='nav-border'></div>
<!-- 导航结束 -->


	<div class='container search'>
		<div class='tab'>搜索</div>
		<div class='border'></div>
		<div class='option-box'>
			<div class='type'>
				<label>发布类型：</label>
				<span>出售</span><span>收购</span>
			</div>
			<div>
				<label>交易有效时间：</label>
				<select>
					<option>三天内</option>
					<option>三天内</option>
					<option>三天内</option>
				</select>
			</div>
		</div>
		<div class='select-tab'>
			<div class='tab-group'>
				<div class='active'>最近</div>
				<div>人气</div>
				<div class='border'></div>
			</div>
			<div class='content-box'>
				<div class='section'>
					<div class='detail'>
						<img src="img/ava.png">
						<p>这个是商品名称</p>
						<p class='num'>查看数：<span>20</span></p>
						<a href="#">商品信息</a>
						<p>交易状态：<span>商品已过期</span></p>
						<p class='date'>发布时间：<span>2015年1月1日</span></p>
					</div>
					<div class='detail'>
						<img src="img/ava.png">
						<p>这个是商品名称</p>
						<p class='num'>查看数：<span>20</span></p>
						<a href="#">商品信息</a>
						<p>交易状态：<span>商品已过期</span></p>
						<p class='date'>发布时间：<span>2015年1月1日</span></p>
					</div>
				</div>
				
			</div>
		</div>
	</div>


	<!--页尾-->
	<div class="footer">
		<img class="color" src="img/footer.png" />
		<div class="link-div">	
			<div class="footer1">
				<a href="#" class="footer-a">红满堂论坛</a>
				<a href="#">华南农业大学首页</a>
				<a href="#">华南农业大学教务处</a>
				<a href="#">华南农业大学论坛</a>
				<a href="#">华南农业大学论坛</a>
			</div>

			<div class="footer2">
				<a href="#">使用须知</a>
				<a href="#">用户必看</a>
				<a href="#">免责声明</a>
				<a href="#">建议投诉</a>
			</div>

			<div class="footer2">
				<p class="footer-p">联系我们</p>
				<p>QQ:<span>123456</span></p>
				<p class="footer-p3">邮箱：<span>84908079800</span></p>
			</div>

			<div class="footer3">
				<p>客户端下载</p>
				<a href="#"><img src="img/footer-code.png"/></a>
				<div>
					<a href="#"><img src="img/load3.png"/></a>
					<a href="#"><img src="img/load4.png"/></a>
				</div>
			</div>
		</div>

		<div class="footer4">
			<img src="img/footer-line.png"></img>
			<div>
				<p>Powered by 红满堂工作室</p>
			</div>
			<img src="img/footer-line.png"></img>
		<div>
	</div>


	<script src="js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript">
		$('.type span').click(function(){
			$(this).parent().find('span').removeClass('active');
			$(this).addClass('active');
		})
		console.log($('.type span'));
	</script></body>
</html>